<!DOCTYPE html>
<html>
  <head>
    <title>Mobile tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>

    <style>
      body {
        padding: 0;
        margin: 0;
      }
      #map {
        height: 100%;
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      // 初始化地图，显示整个世界地图
      var map = L.map('map').fitWorld()

      L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
      }).addTo(map)

      function onLocationFound(e) {
        var radius = e.accuracy / 2

        // 在检测到的位置上添加一个标记，在弹出式窗口中显示精确度
        L.marker(e.latlng)
          .addTo(map)
          .bindPopup('You are within ' + radius + ' meters from this point')
          .openPopup()

        L.circle(e.latlng, radius).addTo(map)
      }

      function onLocationError(e) {
        alert(e.message) // Geolocation error: User denied Geolocation.
      }

      // 注册定位成功
      map.on('locationfound', onLocationFound)
      // 注册定位失败
      map.on('locationerror', onLocationError)

      // 检测用户定位，当定位成功，地图就会将视图设置到此位置，最大缩放值为 16
      map.locate({ setView: true, maxZoom: 16 })
    </script>
  </body>
</html>
